<template>
  <div>
    <div v-if="qx===1">
      <el-card class="box-card" style="width: 70%;float: left;height: 80vh">
        <div slot="header" class="clearfix">
          <el-button style="float: right" size="mini" @click="qxClick(2)">省局权限</el-button>
          <span>承诺书管理</span>
        </div>
        <el-table
          border
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName">
          <el-table-column
            prop="name"
            label="名称">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
            <template slot-scope="scope">
              <a :href="scope.row.address"
                 style="margin-left: 10px;color: red;text-decoration:underline">{{scope.row.address}}</a>
            </template>
          </el-table-column>
          <el-table-column
            prop="file"
            label="文件名">
          </el-table-column>
          <el-table-column
            prop="stauts"
            label="状态">
            <template slot-scope="scope">
              <div v-if="scope.row.stauts===0">
                <el-tag>等待</el-tag>
              </div>
              <div v-if="scope.row.stauts===1">
                <el-tag type="success">通过</el-tag>
              </div>
              <div v-if="scope.row.stauts===2">
                <el-tag type="danger">驳回</el-tag>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card class="box-card" style="width: 29%;margin-left: 71%;height: 80vh">
        <div slot="header" class="clearfix">
          <span>上传承诺书</span>
        </div>
        <el-upload
          class="upload-demo"
          drag
          ref="upload"
          action="https://jsonplaceholder.typicode.com/posts/"
          :file-list="fileList"
          :on-success="successFun"
          :auto-upload="false">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
      </el-card>
    </div>
    <div v-if="qx===2">
      <el-card class="box-card" style="height: 80vh">
        <div slot="header" class="clearfix">
          <el-button style="float: right" size="mini" @click="qxClick(1)">技术机构权限</el-button>
          <span>承诺书审核</span>
        </div>
        <el-table
          border
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName">
          <el-table-column
            prop="name"
            label="名称">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
            <template slot-scope="scope">
              <a :href="scope.row.address"
                 style="margin-left: 10px;color: red;text-decoration:underline">{{scope.row.address}}</a>
            </template>
          </el-table-column>
          <el-table-column
            prop="file"
            label="文件名">
          </el-table-column>
          <el-table-column
            prop="stauts"
            label="状态">
            <template slot-scope="scope">
              <div v-if="scope.row.stauts===0">
                <el-tag>等待</el-tag>
              </div>
              <div v-if="scope.row.stauts===1">
                <el-tag type="success">通过</el-tag>
              </div>
              <div v-if="scope.row.stauts===2">
                <el-tag type="danger">驳回</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column header-align="center" label="操作" width="200" fixed="right" align="center">
            <template slot-scope="scope">
              <el-button @click="yesClick(scope.$index)" size="small">
                审核通过
              </el-button>
              <el-button @click="noClick(scope.$index)" size="small">
                驳回
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

  </div>
</template>
<script>
  export default {
    data () {
      return {
        fileList: [],
        tableData: [{
          name: 'XXX',
          address: 'url',
          file: "xx.doc",
          stauts: 0,
        }, {
          name: 'XXX',
          address: 'url',
          file: "xx.doc",
          stauts: 0,

        }, {
          name: 'XXX',
          address: 'url',
          file: "xx.doc",
          stauts: 0,

        }, {
          name: 'XXX',
          address: 'url ',
          file: "xx.doc",
          stauts: 0,
        }],
        qx: 1,
      };
    },
    methods: {

      yesClick(index){
        this.tableData[index].stauts = 1
      },
      noClick(index){
        this.tableData[index].stauts = 2
      },

      qxClick(type){
        this.qx = type
      },
      submitUpload() {
        this.$refs.upload.submit();
      },
      successFun(response, file, fileList) {
        console.log(response, file, fileList);
        this.tableData.push({name: 'XXX', address: file.url, file: file.name,stauts:0})

      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    }
  };
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
